<template>
    <el-table
      :data="data"
      style="width: 100%"
      v-loading="loading"
      stripe
      border
    >
    <el-table-column prop="deviceId" label="设备ID" width="100" align="center"></el-table-column>
    <el-table-column prop="deviceName" label="设备名称" width="150" align="center"></el-table-column>
    <el-table-column prop="description" label="问题描述" min-width="200" show-overflow-tooltip></el-table-column>
    <el-table-column label="紧急程度" width="120" align="center">
      <template #default="{row}">
        <el-tag :type="getPriorityTagType(row.priority)">
          {{ getPriorityText(row.priority) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="120" align="center">
      <template #default="{row}">
        <el-tag :type="getStatusTagType(row.status)">
          {{ getStatusText(row.status) }}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column v-if="type === 'resolved'" prop="resolvedTime" label="解决时间" width="180" align="center"></el-table-column>
    <el-table-column v-if="type === 'resolved'" label="处理技术员" width="150" align="center">
      <template #default="{row}">
        {{ row.technicianName || row.technicianId }}
      </template>
    </el-table-column>
      
      <el-table-column label="操作" width="280" align="center" fixed="right">
        <template #default="{row}">
          <el-button 
            type="primary" 
            size="small" 
            @click="handleProcess(row)"
            v-if="type === 'unresolved' && row.status === 0"
          >
            处理
          </el-button>
          <el-button 
            type="success" 
            size="small" 
            @click="handleResolve(row)"
            v-if="type === 'unresolved' && row.status === 1"
          >
            解决
          </el-button>
          <el-button 
            type="info" 
            size="small" 
            @click="showDetail(row)"
          >
            详情
          </el-button>
          <el-button 
            type="warning" 
            size="small" 
            @click="handleEdit(row)"
            v-if="row.status !== 2" 
          > 
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="`报修详情 - ${currentDetail.deviceName || ''}`" width="70%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID">{{ currentDetail.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ currentDetail.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="紧急程度">
          <el-tag :type="getPriorityTagType(currentDetail.priority)">
            {{ getPriorityText(currentDetail.priority) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前状态">
          <el-tag :type="getStatusTagType(currentDetail.status)">
            {{ getStatusText(currentDetail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="报修时间">{{ currentDetail.createdTime }}</el-descriptions-item>
        <el-descriptions-item label="处理技术员" v-if="currentDetail.technicianName">{{ currentDetail.technicianName }}</el-descriptions-item>
        <el-descriptions-item label="解决时间" v-if="currentDetail.resolvedTime">{{ currentDetail.resolvedTime }}</el-descriptions-item>
        <el-descriptions-item label="问题描述" :span="2">
          <div style="white-space: pre-line;">{{ currentDetail.description }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="处理意见" :span="2" v-if="currentDetail.comment">
          <div style="white-space: pre-line;">{{ currentDetail.comment }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="解决方案" :span="2" v-if="currentDetail.solution">
          <div style="white-space: pre-line;">{{ currentDetail.solution }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  
    <!-- 编辑对话框 -->
    <el-dialog v-model="showEditDialog" :title="`编辑报修 - ${currentEdit.deviceName || ''}`" width="50%">
      <el-form :model="currentEdit" label-width="100px">
        <el-form-item label="紧急程度">
          <el-select v-model="currentEdit.priority" placeholder="请选择紧急程度">
            <el-option label="低" :value="1"></el-option>
            <el-option label="中" :value="2"></el-option>
            <el-option label="高" :value="3"></el-option>
            <el-option label="紧急" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input 
            v-model="currentEdit.description" 
            type="textarea" 
            :rows="5"
            placeholder="请输入问题描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">保存</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref, defineProps, defineEmits } from 'vue'
  import { ElMessage } from 'element-plus'
  import { updateRepair } from '@/api/warningAndRepair'
  
  const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'unresolved' // 'unresolved' | 'resolved'
  }
})

const emit = defineEmits(['process', 'resolve'])

// 紧急程度文本
const getPriorityText = (priority: number) => {
  const priorityMap = {
    1: '低',
    2: '中',
    3: '高',
    4: '紧急'
  }
  return priorityMap[priority] || '未知'
}

// 紧急程度标签类型
const getPriorityTagType = (priority: number) => {
  const typeMap = {
    1: 'info',
    2: 'warning',
    3: 'danger',
    4: 'danger'
  }
  return typeMap[priority] || ''
}

// 状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    0: '未处理',
    1: '处理中',
    2: '已解决'
  }
  return statusMap[status] || '未知'
}

// 状态标签类型
const getStatusTagType = (status: number) => {
  const typeMap = {
    0: 'danger',
    1: 'warning',
    2: 'success'
  }
  return typeMap[status] || ''
}

// 处理报修
const handleProcess = (row: any) => {
  emit('process', row.id)
}

// 解决报修
const handleResolve = (row: any) => {
  emit('resolve', row.id)
}
  
  const showDetailDialog = ref(false)
  const showEditDialog = ref(false)
  const currentDetail = ref<any>({})
  const currentEdit = ref<any>({})
  
  // 显示详情
  const showDetail = (row: any) => {
    currentDetail.value = { ...row }
    showDetailDialog.value = true
  }
  
  // 编辑记录
  const handleEdit = (row: any) => {
    currentEdit.value = { ...row }
    showEditDialog.value = true
  }
  
  // 确认编辑
  const confirmEdit = async () => {
    try {
      await updateRepair(currentEdit.value)
      ElMessage.success('修改成功')
      showEditDialog.value = false
      emit('update')
    } catch (error) {
      ElMessage.error('修改失败')
    }
  }
  </script>